<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul>
    <li class="gui">奥拓</li>
    <li>路虎</li>
    <li myname="bin">宾利</li>
    <li myname="bubin">布加迪</li>
    <li myname="binma">玛莎拉蒂</li>
    <li>阿斯顿马丁</li>
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      // jq的属性选择器
      // [class]  含有某个属性的元素
      $("li[class]").css("color", "yellow")
      // [attr=val] 属性值为固定的元素
      $("li[myname=bin]").css("color", "blue")
      // [attr!=val]属性不为当前值的元素
      $("li[myname!=bin]").css("background", "red")
      // [attr^=val] 属性值以某个值开头的元素
      $("li[myname^=bin]").css("font-size", "30px")
      // [attr$=val] 属性值以某个值结尾的元素
      $("li[myname$=bin]").css("text-decoration", "line-through")
      // [attr*=val] 属性中含有某个值的元素
      $("li[myname*=bin]").css("font-family", "华文琥珀")
    })


  </script>
</body>

</html>